<template>
  <AppLayout>
    <view class="content">
      <image class="logo" src="/static/logo.png" />
      <view class="text-area">
        <view class="title" @click="toNext">
          {{ G.clip(title) }}
        </view>
        <view class="title" @click="sysToast">
          sysToast
        </view>
        <view class="title" @click="customToast">
          customToast
        </view>
        <view class="title" @click="showLoading">
          showLoading
        </view>
        <view class="title" @click="showConfirm">
          showConfirm
        </view>
        <view class="title" @click="showAlert">
          showAlert
        </view>
        <view class="title" @click="customPopup">
          customPopup
        </view>
      </view>
      <Test />
    </view>
    <template #custom-popup="{ customPopupConfig, obj }">
      <view v-if="customPopupConfig.type === 'base'" class="custom-popup">
        <text>{{ obj }}</text>
        <view class="btn-groups">
          <button @click="customPopupConfig.cancelHandler">
            取消
          </button>
          <button @click="customPopupConfig.confirmHandler">
            确定
          </button>
        </view>
      </view>
    </template>
  </AppLayout>
</template>

<script>
import { useUi } from '@/mui'
import AppLayout from '@/mui/layouts/index.vue'

// import { at } from '../../mui/tools'
import Test from './components/test.vue'

function api() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        title: 'Hello fdgfdsgfdsgfdgsg'
      })
    }, 1000)
  })
}
export default {
  components: { AppLayout, Test },
  data() {
    return {
      title: 'Hello fdgfdsgfdsgfdgsg'
    }
  },
  onLoad() {
    // const numbers = [10, 20, 30, 40, 50]
    // const result = at(numbers, [1, 3, 4])
    // console.log(result) // [20, 40, 50]
    console.log(this)
  },
  methods: {
    toNext() {
      uni.$util.push({ url: '/pages/index/index2', query: { a: 1, b: 2, c: { d: 1 } }, on(e) {
        console.log(e)
      } })
    },
    customToast() {
      const ui = useUi()
      ui.toast('测试toast')
    },
    sysToast() {
      // uni.showToast({ title: '测试toast' })
      uni.$util.toast('测试toast')
    },
    showLoading() {
      uni.$util.showLoading('加载中...', { icon: '/static/logo.png' })
    },
    showConfirm() {
      uni.$util.confirm({
        title: '测试confirm',
        content: 'dsfgggggggggggggggggggggggg',
        cancelHandler(e) {
          console.log(e)
        }
      })
    },
    showAlert() {
      const ui = useUi()
      uni.$util.alert({ title: '测试alert', content: 'dsfgggggggggggggggggggggggg' })
    },
    customPopup() {
      const ui = useUi()
      const { close } = uni.$util.customPopup({
        type: 'base',
        // hideOnBlur: true,
        obj: { title: '测试自定义弹窗', content: 'dsfgggggggggggggggggggggggg' },
        cancelHandler: (action) => {
          console.log('cancel---', action)
          close()
        },
        confirmHandler: () => {
          console.log('confirm')
          close()
        }
      })
    }
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.title {
  margin: 20rpx 0;
  font-size: 36rpx;
  color: #8f8f94;
}

.custom-popup {
  width: 300rpx;
  padding: 30rpx;
  background-color: antiquewhite;
  border-radius: 18px;
}
</style>
